<template>
	<view class="">
		<div class="shareMainBox">
			<div class="spUser">
				<div class="head"><open-data type="userAvatarUrl"></open-data></div>
				<div class="userInfo">
					<div class="name"><open-data type="userNickName"></open-data></div>
					<div class="mseInfo">“{{ mseInfo[Math.floor(Math.random() * mseInfo.length)] }}”</div>
				</div>
			</div>
			<div class="spImgInfo"><image :src="spInfo.img" mode="widthFix"></image></div>
			<div class="spDetailInfo">
				<h4>{{ spInfo.title }}</h4>
				<div class="price">
					<strong>￥0</strong>
					点击0元免费拿
				</div>
				<p v-if="zlList.length < 3">
					已助力
					<span>{{ zlList.length }} 人</span>
					，还需
					<span>{{ 3 - zlList.length }}人</span>
					助力
				</p>
				<p v-else>恭喜您，助力完成！</p>
				<div class="progress"><u-line-progress activeColor="#ee0a24" :percentage="(zlList.length / 3).toFixed(4) * 100" /></div>

				<h5>【详细介绍】</h5>
				<p>参与活动0元拿</p>
			</div>
			<div v-if="zlList.length < 3">
				<div v-if="openid != user" class="btnBox">
					<u-button type="error" size="large" @click="getUserProfile">助力好友</u-button>
				</div>
				<div v-else class="userFlex">
					<div>
						<u-button type="error" plain size="large"  @click="to19()">
							任性直接购
						</u-button>
					</div>
					<div>
						<u-button color="linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36))" size="large" open-type="share" >
							邀请助力
						</u-button>
					</div>
				</div>
				
			</div>
			<div class="btnBox" v-else>
				<u-button type="error" size="large" v-if="openid != user" @click="toIndex()">好友已领取~</u-button>
				<u-button type="error" size="large" v-else @click="to19()">助力完成，立即领取</u-button>
			</div>
			
			<div class="zlList" v-if="user == openid">
				<h3>助力列表</h3>
				<ul v-if="zlList.length > 0">
					<li v-for="(item,index) in zlList" :key="index">
						<div class="img"><image :src="getAva()" mode=""></image></div>
						<div class="nickName">{{ tuomin(item.phone) }}</div>
					</li>
				</ul>
				<p v-else>暂无好友助力</p>
			</div>
			
			<div class="intro" v-if="spInfo.intro">
				<image :src="spInfo.intro" mode="widthFix"></image>
			</div>
		</div>
		
		<u-modal
			:show="showLogin" 
			title="添加助教微信,立即领取" 
			:cancelText="'暂不领取'" 
			:showCancelButton="false"
			:showConfirmButton="false" 
			:closeOnClickOverlay="true"
			@close="showLogin = false"
			>
			<view class="slot-confirmButton">
				<div class="modalBtns">
					<div class="ewmBox">
						<image :src="ewm" show-menu-by-longpress="true" mode="widthFix"></image>
						<p>长按识别二维码<br>添加助教微信领取</p>
					</div>
				</div>
				
			</view>
		</u-modal>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
const db = wx.cloud.database();
export default {
	data() {
		return {
			mseInfo: [
				'让我们一起徜徉在知识的海洋吧',
				'朋友帮我点一下！我真的需要你的帮助~',
				'这么好的活动，快来帮我一把',
				'帮我一把，我们一起走向人生巅峰',
				'请助我一臂之力',
				'学而时习之，不亦说乎'
			],
			userInfo: '',
			spInfo: {},
			spid: '',
			zlList: [],
			scode: '',
			phone: '',
			nowDate: '',
			percentage: '',
			toLogin: false,
			
			
			name: "娄宇",
			openid: "",
			spid: "",
			user: "",
			ewm: "",
			showLogin: false
		};
	},
	computed: {
		userdata() {
			return this.$store.getters.userdata ? this.$store.getters.userdata : '';
		},
		userphone() {
			return this.$store.getters.userphone ? this.$store.getters.userphone : '';
		},
		userarea() {
			return this.$store.getters.userarea ? this.$store.getters.userarea : '';
		},
		usernum() {
			return this.$store.getters.usernum ? this.$store.getters.usernum : '';
		}
	},
	onShareAppMessage(options) {
		let that = this;
		let shareObj = {
			title: '快来帮我一下~',
			path: '/pages/huodong/kanjia/shareInfo' + '?name=' + that.name + '&spid=' + that.spid + '&user=' + that.user,
			success: function(res) {
				// 转发成功之后的回调
				if (res.errMsg == 'shareAppMessage:ok') {
					console.log(res);
				}
			}
		}; // 来自页面内的按钮的转发
		if (options.from == 'button') {
			shareObj.path = '/pages/huodong/kanjia/shareInfo' + '?name=' + that.name + '&spid=' + that.spid + '&user=' + that.user;
		} // 返回shareObj
		return shareObj;
	},
	onShareTimeline(res) {
		let that = this;
		return {
			title: that.mseInfo[Math.floor(Math.random() * that.mseInfo.length)], //字符串  自定义标题
			query: 'name=' + that.name + '&spid=' + that.spid + '&user=' + that.user
		};
	},
	onShow() {},
	onPageScroll(e) {
		let that = this;
	},
	onPullDownRefresh() {
		let that = this;
		that.getSpInfo();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onLoad(options) {
		console.log(options);
		if (!options) {
			this.infoScene = 'default';
		} else {
			this.name = options.name == "undefined" ? "娄宇" : options.name;
			this.spid = options.spid;
			this.user = options.user;
		}
	},

	created() {
		let that = this;
		that.getopenid()
		
	},
	mounted() {
		this.getewm()
		
		
	},
	methods: {
		getopenid() {
			let that = this;
			wx.cloud.callFunction({
				name: 'getopenid',
				data: {},
				complete: res => {
					that.openid = res.result.openid
					that.getSpInfo();
				}
			});
		},
		getewm(){
			let that = this
			db.collection("bxms_ewm").where({
			    name: that.name
			}).get({
				success: function(res){
					console.log(that.name)
					that.ewm = res.data[0].ewm1
					
				},
				fail: function(req){
					console.log(req)
				}
			})
		},
		getUserProfile(e) {
			let that = this
			
			console.log(e)
			wx.getUserProfile({
				desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success: res => {
					that.userInfo = res.userInfo
					if(that.userphone){
						that.writexz()
					}else{
						wx.showToast({
							title: "请先登录",
							icon: "error",
							success() {
								let path = '../../my/login?navTlt=' + '助力活动'
								uni.navigateTo({
									url: path
								});
							}
						})
					}
				}
			});
		},
		getZlList() {
			let that = this;
			db.collection('kjhd_zl').where({
				user: that.user,
				spid: that.spid
			}).get({
				success: function(res) {
					that.zlList = res.data
				},
				fail: function(req){
					console.log(req)
				}
			});
		},
		getSpInfo() {
			let that = this
			db.collection('kjhd_users').where({
				openid: that.user,
				spid: that.spid
			}).get({
				success: function(res) {
					console.log(res.data[0])
					that.spInfo = res.data[0]
					that.getZlList()
				},
				fail: function(req){
					console.log(req)
				}
			});
		},
		writexz() {
			let that = this;
			db.collection('kjhd_zl').add({
				data: {
					user: that.user,
					name: that.name,
					spid: that.spid,
					avatarUrl: that.userInfo.avatarUrl,
					nickName: that.userInfo.nickName,
					phone: that.userphone
				},
				success: function(res) {
					wx.showToast({
						title: "助力成功",
						icon: "success",
						success() {
							that.toIndex()
						}
					})
				},
				fail: function(req){
					wx.showToast({
						title: "已经助力",
						icon: "error",
						success() {
							that.toIndex()
						}
					})
				}
			});
			
		},
		toIndex(){
			let that = this
			uni.navigateTo({
				url: './index' + '?name=' + that.name
			});
		},
		to19() {
			let that = this;
			that.showLogin = true
		},
		tuomin(mobile){
			return mobile.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")
		},
		getAva(){
			let n = Math.ceil(Math.random() * 28)
			return "http://www.baixuemianshi.com/zhuanti/images/ava/" + (n + 1) + ".jpg"
		}
	}
};
</script>

<style>
@import url('./index.css');
</style>
